<template>
  <div class="discount-container">
     <van-tabs v-model="active" @change="tabChange">
      <van-tab title="待使用" :name="1">
        <div class="list-container" v-if="oneList.length">
          <div class="item-coupon" v-for="(item, index) in oneList" :key="index">
            <div class="left-container">
              <div class="price">{{ item.amount }}元</div>
              <div class="tip">{{ !item.cost ? '无门槛使用' : `满${item.cost}减${item.amount}` }}</div>
            </div>
            <div class="right-container">
              <div class="top">{{ item.title }}</div>
              <div class="time">{{ item.timefrom | timeFilter }}-{{ item.timeto | timeFilter }}</div>
            </div>
          </div>
        </div>
        <van-empty description="暂无优惠" v-else/>
      </van-tab>
      <van-tab title="已使用" :name="2">
        <div class="list-container" v-if="twoList.length">
          <div class="item-coupon disable" v-for="(item, index) in twoList" :key="index">
            <div class="left-container">
              <div class="price">{{ item.amount }}元</div>
              <div class="tip">{{ !item.cost ? '无门槛使用' : `满${item.cost}减${item.amount}` }}</div>
            </div>
            <div class="right-container">
              <div class="top">{{ item.title }}</div>
              <div class="time">{{ item.timefrom | timeFilter }}-{{ item.timeto | timeFilter }}</div>
            </div>
          </div>
        </div>
        <van-empty description="暂无优惠" v-else/>
      </van-tab>
      <van-tab title="已过期" :name="3">
        <div class="list-container" v-if="threeList.length">
          <div class="item-coupon disable" v-for="(item, index) in threeList" :key="index">
            <div class="left-container">
              <div class="price">{{ item.amount }}元</div>
              <div class="tip">{{ !item.cost ? '无门槛使用' : `满${item.cost}减${item.amount}` }}</div>
            </div>
            <div class="right-container">
              <div class="top">{{ item.title }}</div>
              <div class="time">{{ item.timefrom | timeFilter }}-{{ item.timeto | timeFilter }}</div>
            </div>
          </div>
        </div>
        <van-empty description="暂无优惠" v-else/>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  filters: {
    timeFilter (el) {
      return moment(el * 1000).format('YYYY.MM.DD')
    }
  },
  data () {
    return {
      active: 1,
      oneList: [],
      twoList: [],
      threeList: []
    }
  },
  mounted () {
    this.getCouponList()
  },
  methods: {
    tabChange (e) {
      // console.log(e)
    },
    async getCouponList () {
      const result1 = await this.$fetchGet('/home/member/coupon', {
        type: 1
      })
      this.oneList = result1.data.list
      const result2 = await this.$fetchGet('/home/member/coupon', {
        type: 2
      })
      this.twoList = result2.data.list
      const result3 = await this.$fetchGet('/home/member/coupon', {
        type: 3
      })
      this.threeList = result3.data.list
    }
  }
}
</script>

<style lang="scss">
.discount-container {
  background: #fff;
  height: calc(100vh - 100px);
}
.list-container {
  .item-coupon {
    display: flex;
    // text-align: center;
    line-height: 40px;
    padding: 50px;
    margin: 20px;
    border: 1PX solid #FF3030;
    border-radius: 20px;
    &.disable {
      border: 1PX solid #A9A9A9;
      .left-container, .right-container {
        color: #A9A9A9;
      }
    }
    .left-container {
      color: #FF3737;
      flex: 2;
      border-right: 1px solid #D0D0D0;
      .price {
        font-size: 40px;
        font-weight: 500;
      }
    }
    .right-container {
      flex: 3;
      padding-left: 50px;
      color: #444444;
    }
  }
}
</style>